<template>
  <div class="login-box">
    <div class="login-content">
      <el-form
        ref="ruleFormRef"
        :model="formData"
        :rules="rules"
        status-icon
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="formData.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="formData.password"
            autocomplete="off"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="login-btn"
            @click="handlerLogin(ruleFormRef)"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ref, reactive } from "vue";
import UserManage from "@/http/api/UserManage";
import LocalCache from "@/utils/cache";

const store = useStore();
const router = useRouter();
let ruleFormRef = ref();
// 表格
let formData = reactive({
  username: "",
  password: "",
});
// 登录按钮
const handlerLogin = (ruleFormRef) => {
  ruleFormRef.validate((isValid) => {
    console.log(isValid);
    // 校验通过
    if (isValid) {
      UserManage.login(formData, true).then((res) => {
        if (res.actionType == "ok") {
          // 用户信息持久化存储
          LocalCache.setStorage("userInfo", res.data);
          router.push("/index");
        }
      });
    }
  });
};

// 表单校验规则
const rules = reactive({
  account: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur",
    },
  ],
  pwd: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
});
</script>

<style lang="scss" scoped>
.login-box {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("../assets/images/login.png") no-repeat center / cover;
}
.login-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 200px;
  background: rgba($color: #000000, $alpha: 0.5);
}
.demo-ruleForm {
  width: 100%;
  height: 100%;
}
.el-form {
  position: absolute;
  padding: 0 20px;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
}
::v-deep .el-form-item__label {
  color: #fff;
}

// 登录按钮
.login-btn {
  width: calc(100% - 51px);
  margin-left: 51px;
}
</style>
